import type { FC, PropsWithChildren } from 'react'
import Icon from '../../../Icon'
import View from '../../../common/View'
import { getRgb, initvalue } from '../../../common/utils'
import { useAccentColor } from '../../../common/hooks/useAccentColor'
import { context } from '../../../common/context'
import { Title, TitleContent } from './style'

const Index: FC<PropsWithChildren<{ name: string }>> = ({ children, name }) => {
  const { resume: { content, customization }, fontScale } = context

  const { spacing, applyAccentColor, title, colors } = customization

  const { showIcon, style, titleBkg: bkg } = title || {}
  const { fontSize, spacingFactor } = spacing
  const titleFontSize = `${((fontSize || 0) * 0.5 + initvalue.fontSize + 1) * fontScale}pt`
  let item = content[name]
  if (name === 'basicInfo') {
    item = {
      displayName: '个人信息',
      iconKey: 'comment'
    }
  }
  const styles: any = {
    display: 'inline-flex',
    alignItems: 'center',
    gap: '4px',
    fontSize: titleFontSize,
    marginBottom: `${spacingFactor * 0.2 + 2}px`,
    paddingBottom: '2px',
    paddingTop: '2px',
    color: '#fff'
  }

  const [color, position] = useAccentColor(name)
  if (applyAccentColor?.includes('headings') && position) {
    styles.color = color
  }
  let titleBkg = 'rgba(0,0,0,.04)'
  if (bkg) {
    titleBkg = getRgb(bkg)
  }

  return (<View>
    <Title style={{ '--color': titleBkg, '--bkgcolor': getRgb(colors.strong?.backgroundColor) } as any} >
      <TitleContent style={{ ...styles, background: titleBkg, justifyContent: 'center', padding: '7px 34px', minWidth: 100 }}>
        {
          children || <>
            {showIcon ? <Icon name={item?.iconKey} ></Icon> : null}
            {item?.displayName}
          </>
        }
        {/* </span> */}
        {/* <span className={'titleIcon'}></span> */}
      </TitleContent>
    </Title>
  </View>)
}
export default Index
